<template>
  <el-card class="search-keyword">
    <p>搜索用户数</p>
    <div class="search-keyword-chart" ref="searchKeywordRef"></div>
  </el-card>
</template>

<script lang="ts">
export default {
  name: 'SearchKeyWord',
}
</script>

<script lang="ts" setup>
import * as echarts from 'echarts'
import { onMounted, ref } from 'vue'

const searchKeywordRef = ref()
onMounted(() => {
  const myEchart = echarts.init(searchKeywordRef.value)
  const option = {
    xAxis: {
      data: [
        '北京',
        '深圳',
        '上海',
        '广州',
        '武汉',
        '西安',
        '拉萨',
        '南昌',
        '长沙',
        '合肥',
        '济南',
        '长春',
      ],
      show: false,
      boundaryGap: false, //取消坐标轴的左右留白
    },
    yAxis: {
      show: false,
    },
    series: {
      name: '搜索量',
      type: 'line',
      data: [25, 20, 29, 18, 23, 25, 20, 29, 18, 23, 30, 15],
      smooth: true, //是否曲线显示
      lineStyle: {
        color: '#5fbbff',
      },
      itemStyle: {
        opacity: 0,
      },
      areaStyle: {
        color: '#d8eeff',
      },
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'line',
      },
    },
    grid: {
      left: 0,
      right: 0,
      top: 10,
      bottom: 0,
    },
  }
  myEchart.setOption(option)
})
</script>

<style scoped>
.search-keyword {
  margin-top: 20px;
}

.search-keyword-chart {
  height: 100px;
}
</style>
